import { SearchOutlined } from "@ant-design/icons";
import {
  ProFormDateRangePicker,
  ProFormSelect,
  ProFormText,
  QueryFilter,
} from "@ant-design/pro-components";
import { Card, Table, Tag, Typography } from "antd";

import React, { useMemo, useState } from "react";

import "./index.less";

const { Title } = Typography;

interface Item {
  key: number;
  name: string;
  status: "open" | "closed" | "pending";
  owner: string;
  date: string;
}

const source: Item[] = Array.from({ length: 50 }).map((_, i) => ({
  key: i + 1,
  name: `任务-${i + 1}`,
  status: (i % 3 === 0
    ? "open"
    : i % 3 === 1
      ? "closed"
      : "pending") as Item["status"],
  owner: ["Alice", "Bob", "Cindy"][i % 3],
  date: `2024-11-${(i % 28) + 1}`,
}));

const Page46: React.FC = () => {
  const [filters, setFilters] = useState<any>({});

  const data = useMemo(() => {
    return source.filter((it) => {
      if (filters.name && !it.name.includes(filters.name)) return false;
      if (filters.status && it.status !== filters.status) return false;
      if (filters.owner && it.owner !== filters.owner) return false;
      return true;
    });
  }, [filters]);

  return (
    <div className="page46-page">
      <Title level={2} className="page-title">
        高级筛选与搜索
      </Title>
      <Card>
        <QueryFilter
          defaultCollapsed
          onFinish={async (values) => setFilters(values)}
          onReset={() => setFilters({})}
          collapseRender={(collapsed) => (collapsed ? "展开筛选" : "收起筛选")}
          span={12}
        >
          <ProFormText
            name="name"
            label="任务名"
            placeholder="输入任务名"
            fieldProps={{ prefix: <SearchOutlined /> }}
          />
          <ProFormSelect
            name="status"
            label="状态"
            valueEnum={{ open: "进行中", closed: "已关闭", pending: "待处理" }}
          />
          <ProFormSelect
            name="owner"
            label="负责人"
            valueEnum={{ Alice: "Alice", Bob: "Bob", Cindy: "Cindy" }}
          />
          <ProFormDateRangePicker name="range" label="时间范围" />
        </QueryFilter>

        <div className="result-card">
          <Table
            rowKey="key"
            dataSource={data}
            columns={[
              { title: "ID", dataIndex: "key", width: 80 },
              { title: "任务名", dataIndex: "name" },
              {
                title: "状态",
                dataIndex: "status",
                render: (v: Item["status"]) => (
                  <Tag
                    color={
                      v === "open"
                        ? "green"
                        : v === "closed"
                          ? "default"
                          : "orange"
                    }
                  >
                    {v === "open"
                      ? "进行中"
                      : v === "closed"
                        ? "已关闭"
                        : "待处理"}
                  </Tag>
                ),
              },
              { title: "负责人", dataIndex: "owner" },
              { title: "日期", dataIndex: "date" },
            ]}
            pagination={{ pageSize: 8, showSizeChanger: false }}
          />
        </div>
      </Card>
    </div>
  );
};

export default Page46;
